<template>
  <div class="account-register">
    <contentBox>
      <el-row justify="center">
        <el-col :span="7">
          <div class="account-title">互联互通账号注册</div>
          <el-form
            :model="formModel"
            label-width="100px"
            label-position="left"
            :rules="formRules"
            ref="formRef"
          >
            <el-form-item label="账号" prop="account">
              <el-input
                v-model="formModel.account"
                maxlength="25"
                minlength="8"
                placeholder="请输入8～25个字符"
                @blur="validateAccount"
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
              <el-input
                v-model="formModel.phone"
                maxlength="11"
                placeholder="请输入11位手机号"
              ></el-input>
            </el-form-item>
            <el-form-item label="验证码" prop="validCode" class="code-parent">
              <el-input
                v-model="formModel.validCode"
                maxlength="6"
                placeholder="请输入6位验证码"
              ></el-input>
              <span class="code-num" @click="getCode"
                >( {{ totalTime }} ) 获取验证码</span
              >
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-input
                v-model="formModel.password"
                maxlength="25"
                minlength="8"
                type="password"
                show-password
                placeholder="请输入8～25个字符"
                autocomplete="new-password"
              ></el-input>
            </el-form-item>
            <el-form-item label="密码确认" prop="password1">
              <el-input
                v-model="formModel.password1"
                maxlength="25"
                minlength="8"
                type="password"
                show-password
                placeholder="请输入8～25个字符"
                autocomplete="new-password"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <ElButton
                type="primary"
                size="large"
                class="button"
                @click="registerAccount"
                :loading="loading"
                style="width: 89%; margin-top: 62px"
                >下一步</ElButton
              >
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </contentBox>
  </div>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { getPhoneValidCode, checkAccount, registerHttp } from "@/service/dp.ts";
import contentBox from "../content-box.vue";
const loading: any = ref(false);
const totalTime: any = ref(60);
const timerNull: any = ref(null);
const repeatAccount: any = ref(false);
const formModel: any = ref({
  account: "",
  name: "",
  nickname: "",
  password: "",
  password1: "",
  phone: "",
  validCode: "",
  validCodeReqNo: "",
});
const formRef: any = ref(null);
const formRules: any = ref({
  account: [
    { required: true, message: "请输入账号", trigger: "blur" },
    { min: 8, max: 25, message: "长度在 8 到 25 个字符", trigger: "blur" },
    {
      pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,25}$/,
      message: "至少8个字符,最多25个字符,且包含字母和数字",
      trigger: "blur",
    },
  ],
  phone: [
    {
      required: true,
      message: "请输入11位手机号",
      trigger: "blur",
    },
    {
      required: true,
      message: "手机号码格式不正确",
      trigger: "blur",
      pattern: /^1[3,4,5,6,7,8,9][0-9]{9}$/,
    },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 8, max: 25, message: "长度在 8 到 25 个字符", trigger: "blur" },
    {
      pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,25}$/,
      message: "至少8个字符,最多25个字符,且包含字母和数字",
      trigger: "blur",
    },
  ],
  password1: [
    { required: true, message: "请输入确认密码", trigger: "blur" },
    { min: 8, max: 25, message: "长度在 8 到 25 个字符", trigger: "blur" },
    {
      pattern: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,25}$/,
      message: "至少8个字符,最多25个字符,且包含字母和数字",
      trigger: "blur",
    },
  ],
  validCode: [
    { required: true, message: "请输入验证码", trigger: "blur" },
    { pattern: /^\d{6}$/, message: "验证码只能是数字", trigger: "blur" },
  ],
});
const router = useRouter();

// 获取验证码
function getCode() {
  formRef.value.validateField(["phone"], async (valid: any) => {
    if (valid) {
      if (totalTime.value != 60 && timerNull.value) {
        return;
      }
      timerNull.value = setInterval(() => {
        if (totalTime.value == 0) {
          totalTime.value = 60;
          clearInterval(timerNull.value);
        } else {
          totalTime.value--;
        }
      }, 1000);

      const res: any = await getPhoneValidCode({
        phone: formModel.value.phone,
      });
      if (res.code == 200) {
        formModel.value.validCodeReqNo = res.data;
        ElMessage.success({
          message: "获取验证码成功!",
        });
      } else {
        ElMessage.error({
          message: res.msg,
        });
      }
    }
  });
}

// 验证账号
function validateAccount() {
  formRef.value.validateField(["account"], async (valid: any) => {
    if (valid) {
      const result: any = await checkAccount({
        account: formModel.value.account,
      });
      if (result.code !== 200) {
        ElMessage.error({
          message: result.msg,
        });
        repeatAccount.value = true;
      } else {
        repeatAccount.value = false;
      }
    }
  });
}

// 注册账号
function registerAccount() {
  formRef.value.validate(async (valid: any) => {
    if (valid) {
      if (repeatAccount.value) {
        ElMessage.error({
          message: "账号已存在，请重新输入账号!",
        });
        return;
      }
      if (formModel.value.password1 !== formModel.value.password) {
        ElMessage.error({
          message: "密码和确认密码不一致，请重新输入!",
        });
        return;
      }
      loading.value = true;
      let params: any = {
        account: formModel.value.account,
        name: formModel.value.name,
        nickname: formModel.value.nickname,
        phone: formModel.value.phone,
        validCode: formModel.value.validCode,
        validCodeReqNo: formModel.value.validCodeReqNo,
        password: formModel.value.password,
      };
      const result: any = await registerHttp(params);
      if (result.code === 200) {
        router.push({
          name: "login",
        });
      } else {
        ElMessage.error({
          message: result.msg,
        });
      }
      loading.value = false;
    }
  });
}
</script>

<style scoped>
.account-register {
  overflow: hidden;
}
.account-title {
  margin-top: 120px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 36px;
  color: rgba(0, 0, 0, 0.9);
  line-height: 44px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin-bottom: 60px;
}
.code-parent {
  position: relative;
}
.code-num {
  position: absolute;
  right: 16px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #0052d9;
  line-height: 22px;
  text-align: right;
  font-style: normal;
  text-transform: none;
  cursor: pointer;
}
</style>
